<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/7_1.css"/>
		<title></title>
		<style type="text/css">
			#d1{
				background: red;
			}
			li.active{
				background: red;
			}
			.li{
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
		<body>
	<ul id="tree">
		<li class="closed"><span>考勤管理</span>
			<ul class="hide">
				<li class="li">日常考勤</li>
				<li class="li">请假申请</li>
				<li class="li">加班/出差</li>
			</ul>
		</li>
		<li class="closed"><span>信息中心</span>
			<ul class="hide">
				<li class="li">通知公告</li>
				<li class="li">公司新闻</li>
				<li class="li">规章制度</li>
			</ul>
		</li>
		<li class="closed"><span>协同办公</span>
			<ul class="hide">
				<li class="li">公文流转</li>
				<li class="li">文件中心</li>
				<li class="li">内部邮件</li>
				<li class="li">即时通信</li>
				<li class="li">短信提醒</li>
			</ul>
		</li>
	</ul>
	
	<script type="text/javascript">
		//第一种效果，点击一个弹出来      另一个会收起来
//		var li_father=document.querySelectorAll(".closed");	
//		var uls=document.querySelectorAll(".hide");	
//		var lis=document.querySelectorAll(".li");
//		var spans=document.querySelectorAll("span");
//		for(let i=0;i<spans.length;i++){
//			spans[i].onclick=function(){
//				if(li_father[i].className=="closed"){
//					for(var j=0;j<uls.length;j++){
//						uls[j].className="hide";
//						li_father[j].className="closed";
//					}
//					li_father[i].className="open";
//					uls[i].className="show";
//				}else{
//					li_father[i].className="closed";
//					uls[i].className="hide";
//				}
//			}
//		}
//		
//		for(let m=0;m<lis.length;m++){
//			lis[m].onclick=function(){
//				for(var k=0;k<lis.length;k++){
//					lis[k].className="li";
//				}
//				this.className="active";
//			}
//		}


		//第二种效果，点击一个弹出来      另一个不会收起来
		var li_father=document.querySelectorAll(".closed");	
		var uls=document.querySelectorAll(".hide");	
		var lis=document.querySelectorAll(".li");
		var spans=document.querySelectorAll("span");
		for(let i=0;i<spans.length;i++){
			spans[i].onclick=function(){
				if(li_father[i].className=="closed"){
//					for(var j=0;j<uls.length;j++){
//						uls[j].className="hide";
//						li_father[j].className="closed";
//					}
					li_father[i].className="open";
					uls[i].className="show";
				}else{
					li_father[i].className="closed";
					uls[i].className="hide";
				}
			}
		}
		
		for(let m=0;m<lis.length;m++){
			lis[m].onclick=function(){
				for(var k=0;k<lis.length;k++){
					lis[k].className="li";
				}
				this.className="active";
			}
		}		
	</script>
</body>
	</body>
</html>
